<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        
        button {
            outline: none;
        }
        
        html,
        body,
        ul,
        li,
        p {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        #configButton {
            display: block;
            margin: 100px auto;
            border: none;
            border-radius: 4px;
            width: 150px;
            height: 40px;
            background-color: #92A82D;
            font-size: 14px;
            line-height: 40px;
            color: #ffffff;
            cursor: pointer;
        }
        
        #square {
            display: block;
            margin: 100px auto;
            border: none;
            width: 100px;
            height: 100px;
            background-color: #883B3B;
        }
        
        #configBarWrapper {
            display: none;
            z-index: 100;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000000;
            opacity: 0.7;
        }
        
        #configBar {
            position: absolute;
            top: 100px;
            right: 200px;
            border: 15px solid #C29494;
            width: 300px;
            height: 250px;
            background-color: #ffffff;
            overflow: hidden;
        }
        
        .title {
            float: left;
            font-size: 16px;
            line-height: 35px;
        }
        
        .row {
            margin: 20px 0 20px 20px;
            vertical-align: middle;
        }
        
        .row::after {
            display: block;
            height: 0;
            clear: both;
            content: "";
            visibility: hidden;
        }
        
        .picker {
            float: left;
            margin-left: 20px;
            width: 35px;
            height: 35px;
            font-size: 16px;
            line-height: 35px;
            color: #ffffff;
            text-align: center;
            cursor: pointer;
        }
        
        .size {
            background-color: #646262;
        }
        
        #redColor {
            background-color: #CE3434;
        }
        
        #yellowColor {
            background-color: #DBD82A;
        }
        
        #blueColor {
            background-color: #2D81EE;
        }
        
        .operation-button {
            border: none;
            width: 100px;
            height: 30px;
            font-size: 16px;
            line-height: 30px;
            color: #ffffff;
            cursor: pointer;
        }
        
        #reset {
            float: left;
            margin: 10px 0 0 20px;
            background-color: #817F8B;
        }
        
        #commit {
            float: right;
            margin: 10px 20px 0 0;
            background-color: #C5761B;
        }
    </style>
</head>

<body>
    <button id="configButton">点我修改样式</button>
    <span id="square"></span>
    <div id="configBarWrapper">
        <div id="configBar">
            <ul class="row">
                <p class="title">请选择背景色:</p>
                <li>
                    <span id="redColor" class="color picker">红</span>
                </li>
                <li>
                    <span id="yellowColor" class="color picker">黄</span>
                </li>
                <li>
                    <span id="blueColor" class="color picker">蓝</span>
                </li>
            </ul>
            <ul class="row">
                <p class="title">请选择宽(px):</p>
                <li>
                    <span class="width picker size">200</span>
                </li>
                <li>
                    <span class="width picker size">300</span>
                </li>
                <li>
                    <span class="width picker size">400</span>
                </li>
            </ul>
            <ul class="row">
                <p class="title">请选择高(px):</p>
                <li>
                    <span class="height picker size">200</span>
                </li>
                <li>
                    <span class="height picker size">300</span>
                </li>
                <li>
                    <span class="height picker size">400</span>
                </li>
            </ul>
            <button id="reset" class="operation-button">重置</button>
            <button id="commit" class="operation-button">修改</button>
        </div>
    </div>
    <script>
        var square = document.getElementById('square');
        var configButton = document.getElementById('configButton');
        var configBarWrapper = document.getElementById('configBarWrapper');
        var commit = document.getElementById('commit');
        var reset = document.getElementById('reset');
        var width = document.getElementsByClassName('width');
        var height = document.getElementsByClassName('height');
        var color = document.getElementsByClassName('color');
        for (var i = 0; i < width.length; i++) {
            width[i].onclick = function() {
                square.style.width = this.innerHTML + 'px';
            };
        }
        for (var i = 0; i < height.length; i++) {
            height[i].onclick = function() {
                square.style.height = this.innerHTML + 'px';
            };
        }
        color[0].onclick = function() {
            square.style.backgroundColor = '#CE3434';
        }
        color[1].onclick = function() {
            square.style.backgroundColor = '#DBD82A';
        };
        color[2].onclick = function() {
            square.style.backgroundColor = '#2D81EE';
        };
        configButton.onclick = function() {
            configBarWrapper.style.display = 'block';
        };
        configButton.onmouseover = function() {
            this.style.backgroundColor = '#BEDF2B';
        };
        configButton.onmouseleave = function() {
            this.style.backgroundColor = '#92A82D';
        };
        commit.onclick = function() {
            configBarWrapper.style.display = 'none';
        };
        reset.onclick = function() {
            square.style.width = '100px';
            square.style.height = '100px';
            square.style.backgroundColor = '#883B3B';
            configBarWrapper.style.display = 'none';
        };
    </script>
</body>

</html>